<template>
	<view class="ptong hlist">
		<view class="hitem" v-for="(item, index) in list" :key="index" @click="toDetail()">
			<view class="hone">
				<image class="listimg" :src="item.image" />
			</view>
			<view class="htwo">
				<text class="hname">{{item.title}}</text>
				<text class="hmiao">{{item.languagelist}}</text>
			</view>
		</view>
</view>
</template>

<script>
export default {
	props: {
		list: {
			type: Array,
			default: []
		},
	
	},
	name: "PayPop",
	data() {
		return {
			ispayPop: true,
			animat: this.isanimate(),
		};
	},
	methods: {
		toDetail() {
			this.$emit("toDetail");
		},
		reload() {
			this.$emit("reload");
		},
		manghe() {
			//我的盲盒
			uni.redirectTo({
				url: '/pages/my/index'
			})
		}
	}
}
</script>

<style scoped lang="scss">
.hlist {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	.hitem {
		width: 48%;
		min-height: 400rpx;
		display: flex;
		flex-direction: column;
		border-radius: 20rpx 20rpx;
		margin-bottom: 30rpx;
		box-shadow: 0rpx 4rpx 6rpx 1rpx rgba(107, 107, 107, 0.07);

		.hone {
			width: 100%;
			height: 330rpx;
			border-radius: 20rpx 20rpx 0 0;

			.listimg {
				width: 100%;
				height: 100%;
				border-radius: 20rpx 20rpx 0 0;
			}

		}

		.htwo {
			padding: 15rpx 15rpx 25rpx;

			.hname {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden; //溢出内容隐藏
				text-overflow: ellipsis; //文本溢出部分用省略号表示
				display: -webkit-box; //特别显示模式
				-webkit-line-clamp: 2; //行数
				line-clamp: 2;
				-webkit-box-orient: vertical; //盒子中内容竖直排列

			}

			.hmiao {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				display: block;
				margin-top: 8rpx;
			}
		}
	}

	.hitem:nth-child(even) {
		margin-left: auto;
	}
}
</style>
